/*
 * @Author: zyk 997610780@qq.com
 * @Date: 2022-09-30 14:26:52
 * @LastEditors: zyk 997610780@qq.com
 * @LastEditTime: 2022-09-30 16:45:42
 * @FilePath: \fifty-small-projects\36鼠标移动画板\36.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


// x轴 小盒子数量
let row = 25
// y轴 小盒子数量
let col = 30
// 盒子默认样式
let default_style = {
  backgroundColor:'#1d1d1d',
  boxShadow:'0 0 2px #000'
}

let board = document.querySelector('.board')
board.style.width = `${row * 20}px`

function createdBox() {

for (let j = 0; j < col; j++) {
  for (let i = 0; i < row; i++) {
    let div = document.createElement('div')
    div.classList.add('square')
    board.appendChild(div)
    div.addEventListener('mouseover',setColor)
    div.addEventListener('mouseout',initColor)
  }
}
}

createdBox()


// 鼠标移入
function setColor(){
  let max = 255
  let color = `rgb(${Math.floor(Math.random() * max)},${Math.floor(Math.random() * max)},${Math.floor(Math.random() * max)})`
  this.style.background = color
  this.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}

// 鼠标移出
function initColor(){
  this.style.backgroundColor = default_style.backgroundColor
  this.style.boxShadow = default_style.boxShadow
}